<m-card>
  <ng-container card-head>
    <div class="d-flex justify-content-between align-items-center w-100">
      <span class="g-card-title">软件使用记录</span>
    </div>
  </ng-container>
  <m-api-data-table [dataSource]="softwareLogger" [defaultOption]="{ software_id: id$ | async }">
    <ng-container mDataTableColumn header="区域名称">
      <ng-template let-area="area_name">
        <td>{{ area }}</td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="姓名">
      <ng-template let-username="username" let-id="uid">
        <td>
          <a [mDetailRouterLink]="{ type: 'personnel', id: id, name: username }">{{ username }}</a>
        </td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="工号">
      <ng-template let-job_number="user_number">
        <td>{{ job_number }}</td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="终端别名">
      <ng-template let-name="pc_name">
        <td>{{ name }}</td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="终端IP">
      <ng-template let-ip="pc_ip">
        <td>{{ ip }}</td>
      </ng-template>
    </ng-container>
    <ng-container mDataTableColumn header="使用时间">
      <ng-template let-time="created_at">
        <td>{{ time | date }}</td>
      </ng-template>
    </ng-container>
  </m-api-data-table>
</m-card>
